<template>
  <comment-card :title="'今日用戶交易数'" :value="'888,888'">
    <template #default>
      <v-chart :option="options"></v-chart>
      <!--      <div id="userChart" style="width: 100%;height: 100%"></div>-->
    </template>
    <template #footer>
      <span>退货率 </span>
      <span class="emphasis">5.14%</span>
    </template>
  </comment-card>
</template>

<script>
import commentCardMixin from './mixins/commentCardMixin'

export default {
  name: 'TodayUser',
  mixins: [commentCardMixin],
  mounted() {
    // const chartDom = document.getElementById('userChart')
    // const chart = this.$echarts.init(chartDom)
    // chart.setOption(
    //   {
    //   tooltip: {
    //     borderColor: '#fff'
    //   },
    //   color: ['#3398DB'],
    //   series: [{
    //     name: '用户实时交易量',
    //     type: 'bar',
    //     data: [620, 432, 220, 210, 790, 430, 320, 532, 320, 834, 530, 220, 640, 543],
    //     barWidth: '50%'
    //   }],
    //   xAxis: {
    //     type: 'category',
    //     data: ['00:00', '02:00',
    //       '04:00', '06:00', '08:00', '10:00', '12:00',
    //       '14:00', '16:00', '18:00', '20:00', '22:00', '23:00', '24:00'],
    //     show: false,
    //     axisPointer: {
    //       label: {
    //         textBorderWidth: '25'
    //       }
    //     }
    //   },
    //   yAxis: { show: false },
    //   grid: {
    //     top: 0,
    //     bottom: 0,
    //     left: 0,
    //     right: 0
    //   }
    // }
    // )
  },
  data() {
    return {
      options: {
        tooltip: {
          borderColor: '#fff'
        },
        color: ['#3398DB'],
        series: [{
          name: '用户实时交易量',
          type: 'bar',
          data: [620, 432, 220, 210, 790, 430, 320, 532, 320, 834, 530, 220, 640, 543],
          barWidth: '50%'
        }],
        xAxis: {
          type: 'category',
          data: ['00:00', '02:00',
            '04:00', '06:00', '08:00', '10:00', '12:00',
            '14:00', '16:00', '18:00', '20:00', '22:00', '23:00', '24:00'],
          show: false,
          axisPointer: {
            label: {
              textBorderWidth: '25'
            }
          }
        },
        yAxis: { show: false },
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
